Object-Oriented JavaScript — Modules

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at JavaScript modules.

Modules

JavaScript modules let us divide our code into multiple small chunks.

Modules in JavaScript are just regular JavaScript files.

There’s no module keyword.

We just use the export keyword to make items in modules available to other modules.

For instance, we can write:

module.js

export const port = 8080;
export function startServer() {
  //...
}
export class Config {
  //...
}
export function process() {
  //...
}

to create a module with various members exported.

We can export variables, functions, classes, etc.

Then we can import it by writing:

import * from './module'

We import all members from a module with the asterisk.

Also, we can import individual members by writing:

import { Config, process } from "./module";

We import the proces function and the Config class from module .

If we only have only one thing to export, we can use the default export syntax.

For instance, we can write:

export default class {
  //...
}

then we export the class in module.js .

Then we import it by writing:

import C from "./module";

Modules have some special properties.

They’re singletons, which means that it’s imported only once in another module.

Variables, fucmtions and other declarations are local to the module.

Only the ones that are marked with export are available for import .

Modules can import other modules.

We did that with the import statement we used earlier.

The path is relative in the examples.

But we can import modules with the module name if they’re in the node_modules folder.

ES5 supports libraries with CommonJS and Asynchronous Module Definition (AMD) module systems.

These aren’t part of the language spec.

They’re 3rd party systems that are adopted for use since ES5 and earlier don’t have a native module system.

CommonJS is the default module system that Node.js uses.

Export Lists

We can export a bunch of items in one line.

For instance, we can write:

const port = 8080;

function startServer() {
  //...
}
class Config {
  //...
}
function process() {
  //...
}

export { port, startServer, Config, process };

Then we export all the variables, classes, and functions that are above it.

We can then import them with import in another module.

The name that we import the members with can be changed with the as keyword.

For instance, we can write:

import { process as processConfig } from "./module";

We import the process function to processConfig with the as keyword.

Also, we can rename exports.

For instance, we can write:

module.js

const port = 8080;
function startServer() {
  //...
}
class Config {
  //...
}
function process() {
  //...
}

export { port, startServer, Config, process as processConfig };

Then we can import it bu writing:

import { processConfig } from "./module";

We used as on an export to rename it.

Conclusion

We can use modules to divide our code into small chunks.

This way, we won’t have to use global variables or have large pieces of code.